<template>
  <div class="dc-page-design-right">
    <el-tabs v-model="currentTab" class="dc-page-design-r-t" stretch>
      <el-tab-pane label="属性" name="comp" />
      <el-tab-pane label="布局样式" name="style" />
      <el-tab-pane label="页面" name="page" />
    </el-tabs>

    <div class="dc-page-design-r-c">
      <right-props-panel v-if="currentTab === 'comp'" />
      <right-layouts-panel v-else-if="currentTab === 'style'" />
      <page-panel v-else-if="currentTab === 'page'" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import RightPropsPanel from './right/right-props-panel.vue'
import RightLayoutsPanel from './right/right-layouts-panel.vue'
import PagePanel from './page/page-panel.vue'

const props = defineProps({
  activeData: Object
})

const emit = defineEmits(['active-comp', 'clone-comp'])

const currentTab = ref('comp')
</script>

<style lang='scss' scoped>
</style>
